<template>
    <div class="content">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form  :model="formData" ref="formData" label-width="100px" slot="form">
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="活动名称">
                            <el-input  placeholder="请输入活动名称" v-model.trim="formData.activeName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="活动日期范围" >
                            <el-date-picker style="width:100%"
                            :editable="false"
                            type="daterange"
                            placeholder="开始日期~结束日期" v-model="formData.daterange">
                            </el-date-picker>
                        </el-form-item>
                    </el-col> 
                     <el-col :span="8">
                        <div class="btnPosition">
                            <el-button type="primary" @click="onSubmit('formData')" >查询</el-button>
                        </div>
                    </el-col> 
                </el-row>
            </el-form>

            <div class="table-title" slot="table-title"></div>
            <el-button :plain="true" class="addButton" @click="addTo">添加活动</el-button>
            <el-table   style="width: 100%" v-loading="loading" :data="tasklist" border>
                <el-table-column label="活动名称" align="center" prop="activeName">
                    <template scope="scope">
                        <el-button type="text" class="btn-success" @click="toDetail(scope.row.id,scope.row.activeName)">{{scope.row.activeName}}</el-button> 
                    </template>
                </el-table-column>
                <el-table-column label="提交学生人数" prop="submitNumber" align="center"></el-table-column>
                <el-table-column label="话费金额" prop="telFare" align="center"></el-table-column>
                <el-table-column label="状态" prop="status" align="center">
                    <template scope="scope">
                        <span v-if='scope.row.status == 0'>进行中</span>
                        <span v-if='scope.row.status == 1'>未开始</span>
                        <span v-if='scope.row.status == 2'>已结束</span>
                    </template>
                </el-table-column>

                <el-table-column label="活动日期范围" prop="timeRange" align="center"></el-table-column>
                <el-table-column label="操作" width="100" prop="id">
                    <template scope="scope">
                        <el-button type="text" class="btn-success" @click="deteteTask(scope.row.id,scope.row.status)">删除</el-button> 
                    </template>
                </el-table-column>
            </el-table>
             <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>

        <updateActivie v-if="dialogShow.isShow" :visible="dialogShow" @update-list="getList"></updateActivie>

    </div>
</template>
<script>
    import TableLayout from 'components/TableLayout';
    import moment from 'moment';
    import updateActivie from './addActivity';
    import { mapState, mapActions, mapGetters } from 'vuex';
    import { getNewTask, postDeleteTask } from 'api/newTask.js';
    
    export default{
        name: 'taskList',
        components: {TableLayout, updateActivie},
        data() {
            return {
                formData: {
                    daterange: [],
                    activeName: ''
                },
                tasklist: [],
                ids: [],
                addState: false,
                loading: false,
                dataNum: 1, // 表格1显示条数，初始为1
                listQuery: { // 分页
                    page: 1,
                    total: 0
                },
                dialogShow: {
                    isShow: false
                }
            }
        },
        watch: { // 局部刷新列表
            cacheUpdated(val) {
                val && this.getList();
            }
        },
        computed: {
            ...mapState({
                config: state => state.config.table,
                cacheUpdated: state => state.app.cacheUpdated// 局部刷新列表
            }),
            ...mapGetters(['uid'])
        },
        created() {
            this.getList();
        },
        methods: {    
             // 全局获取行数
            ...mapActions(['ChangePageSize']),
            
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            
            handleSizeChange(val) {
                this.listQuery.page = 1;
                this.ChangePageSize(val);
                this.loading = true;                
                this.getList();
            },
            //  功能：当前页码数
            handleCurrentChange(val) {
                this.listQuery.page = val;
                this.loading = true;                
                this.getList();
            },  

            // 查询接口
            getList() {
                let startDate = '';
                let endDate = '';
                if (this.formData.daterange.length) {
                    startDate = this.formData.daterange[0]? moment(this.formData.daterange[0]).format('YYYY-MM-DD HH:mm:ss'):'';
                    endDate = this.formData.daterange[1]?moment(this.formData.daterange[1]).format('YYYY-MM-DD')+' 23:59:59':'';
                }
                if (this.listQuery.page && this.config.pageSize) {   
                    this.loading = true;      
                    getNewTask(this.listQuery.page, this.config.pageSize, startDate, endDate, this.formData.activeName).then(response => {
                        this.loading = false;
                        this.tasklist = response.data.content.list;
                        this.listQuery.total = response.data.content.pagination.total;
                        this.tasklist.forEach(item => {
                            item.timeRange = `${moment(item.startDate).format('YYYY-MM-DD')}~${moment(item.endDate).format('YYYY-MM-DD')}`;  
                        })
                    })
                }
            },

            // 查询按钮
            onSubmit(fromKey) {
                this.listQuery.page = 1;
                this.loading = true;
                // 查询接口调用
                this.getList();
            },

            // 删除
            deteteTask(id, state) {  
                let confirmText = '是否确认删除';
                if (state == 0) {
                    confirmText='活动还在进行中，是否确认删除';
                } 
                this.$confirm(confirmText, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(() => {
                    this.ids[0]=id;
                    postDeleteTask(this.ids).then(response => {
                        // console.log(response);
                        if (response.data.status==200) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getList();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },
           
            // 添加活动按钮
            addTo() {
                this.dialogShow.isShow = true;
            },

            // 详情
            toDetail(id, taskName) {
                this.$router.push({ name: '详情', params: { id, taskName }})
            }
        }
    }
    
</script>

<style lang="scss" scoped>
.addButton{
    margin-bottom:20px;
}
.form-item-title {
    margin: 40px 0;
    font-size: 14px;
    color: #333;
    line-height: 14px;
    border-left: 4px solid #ff5e2c;
    text-indent: 16px;
}

</style>